<template>
  <div class="facilityBox">
    <el-carousel indicator-position="outside" trigger="click"
      arrow="never" :loop="true" :interval="10000">
      <el-carousel-item v-for="(items, index) in facilityData" :key="index">
        <div class="facilityGroup">
          <p class="legendBox flex">
              <span>关机</span>
              <span>故障</span>
              <span>正常</span>
          </p>
          <div class="flex_wb" style="width:100%;height:calc(100% - 20px)">
            <div class="facilityItem flex_b" v-for="item in items" :key="item.id">
              <div class="infoBox flex_b">
                <div style="width:20%" class="flex_cc"><img :src="item.img" alt=""></div>
                <div class="infoNum flex_cc">
                  <p>
                    <span>用量：</span>
                    <span>{{item.dosage}}</span>
                  </p>
                </div>
                <div class="infoNum flex_cc">
                  <p>
                    <span>产量：</span>
                    <span>{{item.output}}</span>                    
                  </p>
                </div>
                <div class="infoNum flex_cc">
                  <p>             
                    <span>成品率：</span>
                    <span>{{item.percent}}</span>
                  </p>
                </div>
                <div class="numBox relative flex_cc">
                  <div class="flex_cc">
                    <span>设备号</span>
                    <span>{{item.num}}</span>
                  </div>
                </div>

              </div>
              <div class="shaftBox flex_cc">
                <p class="timeNum even">
                  <span>0:00</span>
                  <span>2:00</span>
                  <span>4:00</span>
                  <span>6:00</span>
                  <span>8:00</span>
                  <span>10:00</span>
                  <span>12:00</span>
                  <span>14:00</span>
                  <span>16:00</span>
                  <span>18:00</span>
                  <span>20:00</span>
                  <span>22:00</span>
                </p>
                <div class="shaftBar flex">
                  <div v-for="(time, index) in item.shaft" :key="index"
                  :class="time >= 0 ? time == 1 ? 'blue' : 'yellow' : 'red'"></div>
                </div>
                <p class="timeNum odd">
                  <span>1:00</span>
                  <span>3:00</span>
                  <span>5:00</span>
                  <span>7:00</span>
                  <span>9:00</span>
                  <span>11:00</span>
                  <span>13:00</span>
                  <span>15:00</span>
                  <span>17:00</span>
                  <span>19:00</span>
                  <span>21:00</span>
                  <span>23:00</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs';
  
  export default {
    name: 'FfacilityAll',
    props: {

    },

    data () {
      return {
        timeOut: '',                              //计时器
        facilityData: [                           //设备数据（详见接口文档）
          {
            id: 1, num: '132456', img: '../../../static/images/facilityImg.jpg', dosage: 456, output:456, percent: '100%', 
            shaft: [1,1,1,1,1,1,-1,-1,-1,-1,0,0,1,1,-1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,-1,-1,-1,-1,0,0,1,1,-1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,-1,-1,-1,-1,0,0,1,1,-1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,-1,-1,-1,-1,0,0,1,1,-1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,-1,-1,-1,-1,0,0,1,1,-1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,-1,-1,-1,-1,0,0,1,1,-1,1,1,1,1,1,1,1,1,1]
          },
        ]
      }
    },

    created () {
      let that = this;
      
      //接口确定后删除
      let data = [];                
      for(var i = 0, len = that.facilityData.length; i < len;i += 6){
        data.push(that.facilityData.slice(i,i + 6));
      }
      that.facilityData = data;

      // that.loadData();                //接口确定后解开

      that.timeOut = setInterval(function(){
        that.loadData();
      },60*60*1000);

    },

    destroyed () {
      clearInterval(this.timeOut)
    },

    methods: {
      loadData () {
        let that = this;
        axios.post(this.host+'')
        .then(res=>{
          // console.log(res.data);
          that.facilityData = res.data;
          let data = [];
          for(var i = 0, len = that.facilityData.length; i < len;i += 6){
            data.push(that.facilityData.slice(i,i + 6));
          }
          that.facilityData = data;
        })
        .catch(error=>{
          console.log(error);
        });
      }
    }
  }
</script>

<style scoped>
  .facilityBox,.facilityGroup{
    width: 100%;
    height: 100%;
  }
  .legendBox{
    margin: 0;
    flex-direction: row-reverse;
    color: #fff;
    font-size: 13px;
  }
  .legendBox span{
    display: inline-block;
  }
  .legendBox span::before{
    content: '';
    width: 12px;
    height: 12px;
    margin: 0 10px 0 25px;
    display: inline-block;
    position: relative;
    top: 2px;
    border-radius: 6px;
  }
  .legendBox span:first-child::before,.shaftBar div.yellow{
    background-color: #a6937c;
  }
  .legendBox span:nth-child(2)::before,.shaftBar div.red{
    background-color: #e60012;
  }
  .legendBox span:nth-child(3)::before,.shaftBar div.blue{
    background-color: #7ecef4;
  }
  .el-carousel__container{
    height: 91% important;
  }
  .facilityItem{
    width: 100%;
    height: 15%;
  }
  .infoBox{
    width: 47%;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 6px;
    background: #2a405f;
    /* Old browsers */
    background: -moz-linear-gradient(150deg, #2b4068 0%, #2d3c5b 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #2b4068), color-stop(100%, #2d3c5b));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(150deg, #2b4068 0%, #2d3c5b 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(150deg, #2b4068 0%, #2d3c5b 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(150deg, #2b4068 0%, #2d3c5b 100%);
    /* IE10+ */
    background: linear-gradient(150deg, #2b4068 0%, #2d3c5b 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#2b4068, endColorstr=#2d3c5b, GradientType=1);
    /* IE6-9 fallback on horizontal gradient */  
  }
  .infoBox img{
    width: 100%;
    height: 80%;
  }
  .infoNum{
    width: 24%;
    text-align: center;
  }
  .infoNum span{
    display: inline-block;
    text-align: center;
    font-size: 15px;
    color: #ffffff;
  }
  .infoNum span:last-child{
    color: #7ecef4;
  }
  .shaftBox{
    width: 47%;
  }
  .shaftBox p{
    margin: 0
  }
  .shaftBar{
    height: 30%;
    border-radius: 6px;
    overflow: hidden;
  }
  .shaftBar div{
    width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
  }
  .numBox{
    right: -10%;
  }
  .numBox div{
    width: 100px;
    height: 70%;
    padding-right: 15px;
    box-sizing: border-box; 
    text-align: center;
    color: #fff;
    font-size: 15px;
    border-radius: 6px;
    background-color: #448aca;
  }
  .numBox span{
    display: inline-block;
    height: 20px;
    width: 100%;
  }
  .numBox::before{
    content: '';
    width: 3px;
    height: 120%;
    position: absolute;
    right: 15px;
    z-index: -1;
    background-color: #394253;
  }
  .numBox::after{
    content: '';
    display: block;
    position: absolute;
    right: 0;
    border-width: 10px 10px 10px 10px;
    border-style: solid;
    border-color: transparent transparent transparent rgb(37, 56, 79);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .timeNum{
    color: #fff;
    font-size: 12px;
  }
  .timeNum span{
    display: inline-block;
    width: 7.5%;
  }
  .timeNum.odd span{
    text-align: right;
  }
  .timeNum.even span:nth-child(2n+1){
    color: #7ecef4;
  }
  .timeNum.odd span:nth-child(2n){
    color: #7ecef4;
  }
</style>


